<template>
  <div class="wrapper">
    <router-link :to="'/assets/fundlog?operateType=operation'">
      <el-button :type="chooseButton('operation')">资金操作日志</el-button>
    </router-link>
    <router-link :to="'/assets/fundlog?operateType=freeze'">
      <el-button :type="chooseButton('freeze')">资金冻结日志</el-button>
    </router-link>
    <router-link :to="'/assets/fundlog?operateType=unfreeze'">
      <el-button :type="chooseButton('unfreeze')">资金解冻日志</el-button>
    </router-link>
    <!-- 针对于这三个日志的筛选条件 -->
    <el-form style="margin-top:30px" ref="searchForm" :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="用户ID">
        <el-input v-model="searchData.keywords" placeholder="请输入用户ID" clearable></el-input>
      </el-form-item>
      <el-form-item v-if="operateType !== 'unfreeze'" label="类型">
        <el-select v-model="searchData.type" placeholder="请选择类型" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option v-for="(v, k) in showOptions" :label="v" :value="k" :key="k"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始日期">
        <el-date-picker clearable v-model="searchData.startTime" type="date" placeholder="选择开始日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker clearable v-model="searchData.endTime" type="date" placeholder="选择结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch('searchForm')">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" :stripe="true" :border="true" :highlight-current-row="true" v-if="operateType === 'operation'">
      <el-table-column label="日志ID" prop="id"></el-table-column>
      <el-table-column label="用户ID" prop="user_id"></el-table-column>
      <el-table-column label="对方ID" prop="opposite_id"></el-table-column>
      <el-table-column label="操作类型" prop="type_text"></el-table-column>
      <el-table-column label="操作资金(正入/负出)/元" prop="money" :formatter="minuteFormat"></el-table-column>
      <el-table-column label="剩余资金/元" prop="cash" :formatter="minuteFormat"></el-table-column>
      <el-table-column label="共冻结/元" prop="freeze" :formatter="minuteFormat"></el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
      <el-table-column label="状态" prop="status_text"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
    </el-table>
    <el-table v-else-if="operateType === 'freeze'" :data="list" :stripe="true" :border="true" :highlight-current-row="true">
      <el-table-column label="日志ID" prop="id"></el-table-column>
      <el-table-column label="用户ID" prop="user_id"></el-table-column>
      <el-table-column label="对方ID" prop="opposite_id"></el-table-column>
      <el-table-column label="资金日志ID" prop="fund_log_id"></el-table-column>
      <el-table-column label="本次冻结金额/元" prop="money" :formatter="minuteFormat"></el-table-column>
      <el-table-column label="已解冻金额/元" prop="unfreeze_money" :formatter="minuteFormat"></el-table-column>
      <el-table-column label="冻结类型" prop="type_text"></el-table-column>
      <el-table-column label="冻结类型ID" prop="obj_id"></el-table-column>
      <el-table-column label="解冻状态" prop="freeze_status_text"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
    </el-table>
    <el-table v-else-if="operateType === 'unfreeze'" :data="list" :stripe="true" :border="true" :highlight-current-row="true">
      <el-table-column label="日志ID" prop="id"></el-table-column>
      <el-table-column label="用户ID" prop="user_id"></el-table-column>
      <el-table-column label="对方ID" prop="opposite_id"></el-table-column>
      <el-table-column label="冻结日志ID" prop="freeze_log_id"></el-table-column>
      <el-table-column label="解冻金额/元" prop="money" :formatter="minuteFormat"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      searchData: {
        keywords: '',
        type: '',
        startTime: '',
        endTime: ''
      },
      startTimeValue: '',
      endTimeValue: '',
      rules: {},
      options: {
        option: {
          init: '初始化',
          prepaid: '充值',
          transfer: '转让',
          payment: '支付',
          borrow: '借款',
          refund: '还款',
          freeze: '冻结',
          unfreeze: '解冻',
          system: '系统'
        },
        freeze: {
          goods: '商品',
          certificate: '证书',
          order: '订单',
          withdraw: '提现',
          system: '系统'
        }
      }
    }
  },
  async created () {
    await this.getList()
  },
  computed: {
    ...mapState({
      list: state => state.fundlog.list,
      pageData: state => state.fundlog.pageData
    }),
    operateType () {
      // 默认为操作日志
      if (this.$route.query.operateType === undefined) {
        return 'operation'
      }
      return this.$route.query.operateType
    },
    showOptions () {
      if (this.$route.query.operateType === 'freeze') {
        return this.options.freeze
      } else if (this.$route.query.operateType === 'unfreeze') {
        return {}
      } else {
        return this.options.option
      }
    }
  },
  methods: {
    // 获取资金日志列表分页数据
    async getList () {
      let payload = {
        page: this.pageData.current_page,
        list_rows: this.pageData.per_page,
        operateType: this.operateType,
        keywords: this.$route.query.keywords,
        type: this.$route.query.type,
        startTime: this.$route.query.startTime,
        endTime: this.$route.query.endTime
      }
      await this.$store.dispatch('fundlog/getFundLogList', payload)
    },
    // 点击页面时，跳转到相应页面
    handleCurrentChange (val) {
      this.pageData.current_page = val
      this.getList()
    },
    // 按钮选中时的状态
    chooseButton (val) {
      return val === this.operateType ? 'success' : ''
    },
    // 查询
    onSearch (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.searchData.startTime) {
            let Time = new Date(this.searchData.startTime)
            this.startTimeValue = Time.getTime() / 1000
          }
          if (this.searchData.endTime) {
            let Time = new Date(this.searchData.endTime)
            this.endTimeValue = Time.getTime() / 1000
          }
          this.$router.push({
            path: '/assets/fundlog', query: {keywords: this.searchData.keywords, type: this.searchData.type, startTime: this.startTimeValue, endTime: this.endTimeValue, operateType: this.operateType}})
          this.getList()
        }
      })
    },
    // 把分化为元的操作
    minuteFormat (row, column) {
      return Number(row[column.property] / 100)
    }
  },
  watch: {
    operateType: function () {
      this.searchData = {}
      this.getList()
    }
  }
}
</script>
